<div class="navbar navbar-inverse" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
              data-target="#js-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a href="#/" class="pull-left">
        <img class="logo" alt="Icon" src="./navbar_icon.png" height="20" width="20">
      </a>
      <a class="navbar-brand app-name" id="toStart" href="#/">
        LD-VOWL
        <small>V{{::header.appVersion}}</small>
      </a>

    </div>

    <div class="collapse navbar-collapse" id="js-navbar-collapse">
      <ul class="nav navbar-nav">
        <li ng-class="{ active: header.isActive('/graph') }">
          <a ng-href="#/graph">
            <span ng-show="header.loading" class="glyphicon glyphicon-refresh glyphicon-spin"></span>
            Graph
          </a>
        </li>
        <li ng-class="{ active: header.isActive('/settings') }">
          <a ng-href="#/settings" id="toSettings">
            <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
            Settings
          </a>
        </li>
        <li ng-class="{ active: header.isActive('/about') }">
          <a ng-href="#/about">
            <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
            About
          </a>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</div><!-- /.navbar -->
